<template>
	<view class="dust-control">
		<view class="list-filter">
			<view class="filter-item" @click="showIndexList">
				{{projectName}}
				<!-- {{ projectListObj.projectName == '' ? projectName : projectListObj.projectName }} -->
				<u-icon v-if="showProject" name="arrow-up" size="14"></u-icon>
				<u-icon v-else name="arrow-down" size="14"></u-icon>
			</view>
			<view v-if="showDeviceYes" class="filter-item" @click="showDevice = true">
				<text class="device-name"><text class="devicei-tit">设备:</text>{{ deviceNameListChild == '' ? deviceNameList[0][0] : deviceNameListChild }}</text>
				<u-icon v-if="showDevice" name="arrow-up" size="14"></u-icon>
				<u-icon v-else name="arrow-down" size="14"></u-icon>
			</view>
			<!-- 设备选择 -->
			<u-picker :show="showDevice" :columns="deviceNameList" @confirm="confirmDevice" @close="closeDevice" @cancel="cancelDevice" @change="onChangeDevice"></u-picker>
			<view class="history" @click="onHistory">历史</view>
		</view>
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="dust-data-box">
			<view class="dust-data">
				<view class="data-num">
					<text v-if="curNow === 0" class="num">{{ liveData.pm10 }}</text>
					<text v-if="curNow === 1" class="num">{{ liveData.pm25 }}</text>
					<text class="txt">实时数据</text>
					<text class="unit">μg/m³</text>
				</view>
				<view class="data-num">
					<text v-if="curNow === 0" class="num">{{ liveData.avgpm10 }}</text>
					<text v-if="curNow === 1" class="num">{{ liveData.avgpm25 }}</text>
					<text class="txt">最新小时均值</text>
					<text class="unit">μg/m³</text>
				</view>
				<view class="data-num">
					<text v-if="curNow === 0" class="num">250</text>
					<text v-if="curNow === 1" class="num">150</text>
					<text class="txt">预警阈值</text>
					<text class="unit">μg/m³</text>
				</view>
			</view>
			<view class="dust-ucharts">
				<text class="txt">24小时数据</text>
				<view class="charts-box">
					<qiun-data-charts 
						type="area"
						:opts="opts"
						:chartData="chartData"
						:ontouch="true"
					/>
				</view>
			</view>
		</view>
		<view class="week-warning">
			<text class="tit">最新一周预警信息</text>
			<view class="warn-item" v-for="item in warnList" :key="item.id" @click="onDetail(item.id)">	
				<view class="warn-item-content">
					<view class="content-item">
						<text>{{item.alertTitle}}</text>
					</view>
				</view>
				<view class="content-time">告警时间：{{item.createTime}}</view>
				<u-gap height="3" bgColor="#eee"></u-gap>
			</view>
		</view>
		<!-- 项目没有设备提示 -->
		<u-popup :show="showNotify" :round="10" mode="center" @close="closeNotify" closeable>
			<text class="show-notify">此项目下没有设备~</text>
		</u-popup>
	</view>
</template>

<script>
	import { getDeviceCodesByProjectId, getDustNoise, getOneWeekAlert, deviceInfo } from '@/api/dust-control'
	
	export default {
		data() {
			return {
        list: ['PM10', 'PM2.5'],
				curNow: 0,
				projectListObj: {},
				projectList: [],
				 // 折线图数据
				chartData: {},
				opts: {
					color: ["#1890FF"],
					padding: [15,10,0,15],
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 10
					},
					yAxis: {
						gridType: "dash",
						dashLength: 4,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				queryParam: {
					orderBy: 'id desc',
					pageNum: 1
				},
				warnList: [],
				showDevice: false,
				columnsDevice: [
						['设备1', '设备2', '设备3']
				],
				showProject: false,
				projectName: '',
				indexShow: false,
				projectId: '',
				deviceNameDeviceNoListArr: [],
				deviceNameList: [],
				deviceNameListChild: '',
				// 实时数据
				liveData: {},
				// 一周预警信息参数
				params: {
					deviceCode: '',
					type: '1', //pm10
					pageNum: 1,
					reasonable: false
				},
				// 实时数据参数
				paramsRealTime: {
					deviceCode: '',
					type: 'pm10'
				},
				// 获取24小时数据参数
				paramsList: {
					deviceNo: '',
					searchField: 'pm10'
				},
				paramsDevice: {
					deviceType: '1',
					projectId: ''
				},
				showDeviceYes: true,
				showNotify: false
			}
		},
		onLoad(options){
			this.projectId = options.id;
			this.projectName = options.projectName
			this.warnList = []
			this.params.pageNum = 1
			this.getDeviceList()
		},
		mounted() {
		},
		created () {
			// this.getList(this.queryParam)
		},
		onReachBottom() {
			this.params.pageNum++
			// console.log(this.params.pageNum)
			this.getOneWeekAlert(this.params)
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.warnList = []
			this.params.pageNum = 1
			this.getOneWeekAlert(this.params)
			this.getDustNoiseData()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 获取设备列表
			getDeviceList (e) {
				this.paramsDevice.projectId = this.projectId
				getDeviceCodesByProjectId(this.paramsDevice).then(res => {
						const deviceNameListArrData = res.data.data
						const deviceNameListArr = []
						if (deviceNameListArrData.length > 0) {
							this.showDeviceYes = true
							this.deviceNameDeviceNoListArr = []
							deviceNameListArrData.map((a, b) => {
								deviceNameListArr.push(deviceNameListArrData[b].deviceName)
								this.deviceNameDeviceNoListArr.push({
									deviceName: deviceNameListArrData[b].deviceName,
									deviceNo: deviceNameListArrData[b].deviceNo
								})
							})
							this.deviceNameList = [deviceNameListArr]
							// 获取设备编号
							this.deviceNameDeviceNoListArr.map((item, index) => {
									// debugger
								this.deviceNameList.map(() => {
									let deviceCode = ''
									if (this.deviceNameDeviceNoListArr[index].deviceName == this.deviceNameList[0][index]) {
										deviceCode = this.deviceNameDeviceNoListArr[index].deviceNo
									}
									if (e == this.deviceNameDeviceNoListArr[index].deviceName) {
										deviceCode = this.deviceNameDeviceNoListArr[index].deviceNo
									}
									this.params.deviceCode = deviceCode
									this.paramsRealTime.deviceCode = deviceCode
								})
							})
							this.getDustNoiseData()
							this.getOneWeekAlert()
							this.deviceInfo(this.params.deviceCode)
						} else {
							// 此项目下没有设备
							this.showDeviceYes = false
							this.showNotify = true
						}
				})
			},
			// 根据设备编号获取设备实时数据
			getDustNoiseData () {
				getDustNoise(this.paramsRealTime).then(res => {
					this.liveData = res.data.data
				})
			},
			// 获取24小时数据
			deviceInfo (e) {
				this.paramsList.deviceNo = e
				deviceInfo(this.paramsList).then(res => {
					this.getLineData(res.data.data.line)
				})
			},
			// 获取一周预警信息
			getOneWeekAlert () {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getOneWeekAlert(this.params).then(res => {
					const data = res.data.rows
					if (data.length > 0) {
						this.warnList = this.warnList.concat(res.data.rows)
					} else {
						uni.$u.toast('没有更多数据')
					}
				}).catch(error => {
					uni.$u.toast(error)
				}).finally(() => {
					uni.hideLoading()
				})
			},
			onDetail (id) {
				uni.navigateTo({
					url: '/packageE/warn/infodetail?id=' + id
				})
			},
			// tab切换
			sectionChange(index) {
				this.warnList = []
				this.params.pageNum = 1
				this.curNow = index;
				if (this.curNow === 0) {
					this.params.type = '1' //pm10
					this.paramsRealTime.type = 'pm10'
					this.paramsList.searchField = 'pm10'
				} else {
					this.params.type = '2' //pm2.5
					this.paramsRealTime.type = 'pm25'
					this.paramsList.searchField = 'pm25'
				}
				this.getDeviceList()
			},
			onHistory () {
				this.$nextTick(res => {
					uni.navigateTo({
						url: `/packageE/dust-control/dust-control-detail?projectId=${this.projectId}&projectName=${this.projectName}`
					})
				})
			},
			confirmDevice(e) {
				this.deviceNameListChild = e.value[0]
				this.getDeviceList(this.deviceNameListChild)
				this.showDevice = false
			},
			closeDevice() {
				this.showDevice = false
			},
			cancelDevice() {
				this.showDevice = false
			},
			onChangeDevice() {
				// this.showDevice = false
			},
			// 显示全部项目
			showIndexList () {
				uni.navigateTo({
					url: '/packageB/selector/selector?from=' + 'dust-control' + '&to=dust-control'
				})
			},
			// 折线图
			getLineData(line) {
				const obj = {}
				const categories = []
				const linedata = []
				const str = line[0][1]
				line.shift()
				line.map(item=>{
					categories.push(item[0].split('-')[2].split(' ')[1])
					linedata.push(item[1])
				})
				let res = {
						categories,
						series: [
							{
								name: str,
								data: linedata
							}
						]
					};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			// 关闭没有设备提示
			closeNotify() {
				this.showNotify = false
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.dust-control {
		font-size: 28upx;
		height: 100vh;
		.list-filter {
			position: relative;
			.filter-item {
				font-size: 32upx;
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				justify-content: center;
				text-align: center;
				font-weight: bold;
			}
			.history {
				position: absolute;
				right: 30upx;
				top: 16upx;
				font-weight: bold;
				color: #fff;
				background-color: $uni-color-primary;
				border-radius: 6upx;
				padding: 3upx 10upx;
			}
		}
		.dust-data-box {
			background-color: #eeeeef;
			margin-top: 10upx;
			padding: 20upx 30upx;
			.dust-data {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				padding: 20upx 30upx;
				border-radius: 10upx;
				.data-num {
					display: flex;
					flex-direction: column;
					text-align: center;
					line-height: 50upx;
					.num {
						font-size: 32upx;
						font-weight: bold;
						color: $uni-color-primary;
					}
					.unit {
						font-size: 24upx;
						color: #999;
					}
				}
			}
			.dust-ucharts {
				background-color: #fff;
				padding: 20upx 30upx;
				border-radius: 10upx;
				margin-top: 20upx;
				.txt {
					display: block;
					text-align: center;
					margin-bottom: 15upx;
				}
				.charts-box {
					width: 100%;
					height: 400upx;
				}
			}
		}
		.week-warning {
			padding: 20upx 30upx;
			.tit {
				font-weight: bold;
			}
			.warn-item-content {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 20upx;
				border-bottom: 1px solid $u-border-color;
				.content-item {
					font-size: 26upx;
					position: relative;
					padding: 20upx 0 20upx 20upx;
					&:before {
						position: absolute;
						left: -8upx;
						top: 32upx;
						width: 14upx;
						height: 14upx;
						border-radius: 7upx;
						background-color: $uni-color-primary;
						content: '';
					}
				}
			}
			.content-time {
				text-align: right;
				font-size: 24upx;
				padding: 20upx;
				color: $uni-text-color-grey;
			}
		}
		.show-notify {
			padding: 30upx 80upx 30upx 30upx;
		}
		.device-name {
			.devicei-tit {
				color: $uni-text-color-grey;
				margin-right: 10upx;
			}
		}
	}
</style>
